import React, { Component } from 'react';
import { Form, Button, Input, message } from 'antd';
import $Utils from '../utils/index.js';

import './main.less';
import PropTypes from 'prop-types';
const createForm = Form.create;
const FormItem = Form.Item;

class CheckPin extends Component {
    static propTypes = {
        form: PropTypes.object,
        userData: PropTypes.object,
        hideModal: PropTypes.func,
        history: PropTypes.object,
    };
    constructor(props) {
        super(props);
        this.state = {
            isSend: false,
            time: 0,
        };
    }

    submit = () => {
        const { userData, form } = this.props;
        const newUserData = _.cloneDeep(userData);
        delete newUserData.captcha;

        form.validateFields(async (errors, values) => {
            if (!!errors) {
                return;
            }
            try {
                const { success, token = '', message: loginMes = '' } = await this.$qHttp.postForm('/login', { ...newUserData, ...values });
                if (!success) {
                    message.error(loginMes);
                }
                if (success && token) {
                    window.TOKEN = token;
                    sessionStorage.setItem('token', token);
                    this.$qHttp.setOptions({
                        headers: {
                            'X-AUTH-QID': token,
                        },
                    });
                    this.props.history.push({ pathname: '/' });
                }
            } catch (error) {
                console.log(error);
            }
        });
    };

    cancel = () => {
        const { hideModal, form } = this.props;
        form.resetFields(['pin']);
        hideModal();
    };

    async getPin() {
        const { isSend } = this.state;
        if (isSend) {
            return;
        }

        const {
            userData: { username: account },
        } = this.props;
        try {
            await this.$qHttp.get('/logininfo/pin', {
                account,
            });

            this.setState(
                {
                    isSend: true,
                    time: 60,
                },
                () => this.count()
            );
        } catch (error) {
            console.log(error);
        }
    }

    count() {
        const siv = setInterval(() => {
            const { time } = this.state;
            this.setState({ time: time - 1 }, () => {
                if (time === 0) {
                    clearInterval(siv);
                    this.setState({ isSend: false, time: 0 });
                }
            });
        }, 1000);
    }

    render() {
        const {
            userData,
            hideModal,
            form: { getFieldDecorator },
        } = this.props;

        const { isSend, time } = this.state;

        const formItemLayout = {
            layout: 'horizontal',
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            labelAlign: 'left',
        };
        return (
            <div className="check-pin-container">
                <Form {...formItemLayout}>
                    <FormItem label="手机号:">
                        <span style={{ marginRight: '12px' }}>{$Utils.mosaic(userData.contact)}</span>
                        <Button disabled={isSend} onClick={() => this.getPin()}>
                            {isSend ? `重新获取${time}s` : '发送验证码'}
                        </Button>
                    </FormItem>
                    <FormItem label="短信验证码:">
                        {getFieldDecorator('pin', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入短信验证码',
                                },
                            ],
                        })(<Input placeholder="请输入短信验证码" />)}
                    </FormItem>
                </Form>
                <div className="btn-group">
                    <Button className="cancel-btn" onClick={this.cancel}>
                        取消
                    </Button>
                    <Button className="confirm-btn" type="primary" onClick={this.submit}>
                        确定
                    </Button>
                </div>
            </div>
        );
    }
}
CheckPin = createForm()(CheckPin);
export default CheckPin;
